﻿<!DOCTYPE html>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta charset="utf-8">
<title>商品浏览页</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.luara.0.0.1.min.js"></script>
</head>

<body>
<div class="width100" style="height:25ox;background:#f0f0f0;">
	<div class="width1200 center_yh font14 c_66" style="height:25px;line-height:25px;">
    	<font class="left_yh">欢迎来到永安庄园•礼品世家！</font>
        <div class="right_yh" id="fast_jump">
        	<a href="/login.jsp">登录</a>
            <b></b>
            <a href="/register.jsp">注册</a>
            <b></b>
            <a href="/index.jsp">个人中心</a>
            <b></b>
            <a href="#">后台管理</a>
        </div>
    </div>
</div>
<div class="width100 hidden_yh">
	<div class="width1200 center_yh hidden_yh">
    	<a href="#" class="block_yh left_yh" style="margin-top:40px;"><img src="images/logo2.png"></a>
        <div class="right_yh" style="height:28px;width:316px;border:2px solid #dd4545;margin-top:48px;">
        	<form>
                <input type="text" placeholder="关键词查询" class="searCh">
                <input type="button" class="btnSearh" value="搜索">
            </form>
        </div>
    </div>
</div>
<!--导航条-->
<div class="width100" style="height:45px;background:#dd4545;margin-top:40px;position:relative;z-index:100;">
	<!--中间的部分-->	
	<div class="width1200 center_yh relative_yh" style="height:45px;">
    	<!--列表导航(downSlide就显示,否则就不显示)-->
    	<div class="left_yh" style="width:230px;height:45px;" id="hiddenShow">
        	<!--头部的图标-->
        	<img src="images/cd.png" class="left_yh" style="margin-left:24px;">
            <span class="block_yh left_yh fff" style="height:45px;line-height:44px;margin-left:10px;">阶段分类</span>
            <!--下面的导航展开部分-->
            <div class="downSlide">
            	<!--一块-->
            	<div class="n1Nav">
                	<font>幼儿时代</font>
                    <img src="images/jt.png">
                    <div class="n2Nav">
                    	<div class="n3Nav">
                        	<h3>玩具</h3>
                            <a href="#">毛绒玩具</a>
                            <a href="#">积木玩具</a>
                            <a href="#">发光玩具</a>
                            <a href="#">早教/智能玩具</a>
                            <a href="#">儿童乐器/音乐玩具</a>
                        </div>
                        <div class="n3Nav">
                        	<h3>玩具</h3>
                            <a href="#">毛绒玩具</a>
                            <a href="#">积木玩具</a>
                            <a href="#">发光玩具</a>
                            <a href="#">早教/智能玩具</a>
                            <a href="#">儿童乐器/音乐玩具</a>
                        </div>
                        <div class="n3Nav">
                        	<h3>玩具</h3>
                            <a href="#">毛绒玩具</a>
                            <a href="#">积木玩具</a>
                            <a href="#">发光玩具</a>
                            <a href="#">早教/智能玩具</a>
                            <a href="#">儿童乐器/音乐玩具</a>
                        </div>
                    </div>
                </div>
                <!--一块-->
                <div class="n1Nav">
                	<font>小学时代</font>
                    <img src="images/jt.png">
                    <div class="n2Nav">
                    	<div class="n3Nav">
                        	<h3>玩2具</h3>
                            <a href="#">毛绒玩具</a>
                            <a href="#">积木玩具</a>
                            <a href="#">发光玩具</a>
                            <a href="#">早教/智能玩具</a>
                            <a href="#">儿童乐器/音乐玩具</a>
                        </div>
                        <div class="n3Nav">
                        	<h3>玩具</h3>
                            <a href="#">毛绒玩具</a>
                            <a href="#">积木玩具</a>
                            <a href="#">发光玩具</a>
                            <a href="#">早教/智能玩具</a>
                            <a href="#">儿童乐器/音乐玩具</a>
                        </div>
                        <div class="n3Nav">
                        	<h3>玩具</h3>
                            <a href="#">毛绒玩具</a>
                            <a href="#">积木玩具</a>
                            <a href="#">发光玩具</a>
                            <a href="#">早教/智能玩具</a>
                            <a href="#">儿童乐器/音乐玩具</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--普通导航-->
        <div class="left_yh font16" id="pageNav">
        	<a href="index.jsp">首页</a>
            <a href="product.jsp" class="Selected">工艺礼品</a>
            <a href="product.jsp">电子礼品</a>
            <a href="product.jsp">品牌礼品</a>
            <a href="product.jsp">商务礼品</a>
            <a href="product.jsp">食品礼盒</a>
        </div>
    </div>
</div>
<!--当前位置-->
<div class="width1200 center_yh hidden_yh font14" style="height:40px;line-height:40px;">
	<span>当前位置:</span>
	<a href="#" class="c_66">首页></a>
	<a href="#" class="c_66">工艺礼品</a>
</div>
<!--各种筛选-->
<div id="filter">
	<div class="oList">
    		<span>按对象：</span>
        <a href="#" class="on">不限</a>
        <a href="#">幼儿时代</a>
        <a href="#">小学时代</a>
        <a href="#">中学时代</a>
        <a href="#">大学时代</a>
        <a href="#">30阶段</a>
        <a href="#">40阶段</a>
        <a href="#">50阶段</a>
        <a href="#">60阶段</a>
        <a href="#">70阶段</a>
        <a href="#">80阶段</a>
        <a href="#">90阶段</a>
        <a href="#">100阶段</a>
    </div>
    <div class="oList">
    	<span>按功能：</span>
        <a href="#" class="on">不限</a>
        <a href="#">福利</a>
        <a href="#">奖励</a>
        <a href="#">关怀</a>
        <a href="#">宣传</a>
        <a href="#">纪念</a>
        <a href="#">答谢</a>
        <a href="#">拜访</a>
        <a href="#">祝贺</a>
    </div>
    <script>
    	$(".oList a").click(function(){
			$(this).addClass("on").siblings().removeClass("on")
			})
    </script>
</div>
<div class="width1198 center_yh" style="height:35px;background:#f0f0f0;border:1px solid #ddd;margin-top:25px;">
	<a href="javascript:void(0)" class="mR on">默认</a>
    <a href="javascript:void(0)" class="mR">价格<img src="images/gg.png"></a>
    <a href="javascript:void(0)" class="mR">销量<img src="images/gg.png"></a>
    <script>
    	$(".mR").click(function(){
			$(this).addClass("on").find("img").attr("src","images/gg2.png").parent().siblings().removeClass("on")
			$(this).siblings().removeClass("on")
			})
    </script>
</div>
<!--商品列表-->
<div class="width1200 center_yh hidden_yh" style="margin-top:25px;">
    <ul class="listSs">
        <li>
            <a href="product_detail.jsp" class="bjK">
            	<img src="images/xc.png">
            </a>
            <h3 class="spName">2017玉石摆件 客厅装饰品 玄关柜招财工艺品摆设</h3>
            <p class="center_yh block_yh hidden_yh" style="width:202px;">
            	<font class="left_yh red font16">￥268.00</font>
              <font class="right_yh c_66 font14">126人已买</font>
            </p>
            <div class="wCa">
            	<div class="wCa1">
                	<b><img src="images/star.png"></b>
                    <font>收藏</font>
                </div>
                <div class="wCa2">
                	<b><img src="images/sar.png"></b>
                    <font>加入购物车</font>
                </div>
            </div>
        </li>
        <li>
            <a href="product_detail.jsp" class="bjK">
            	<img src="images/xc.png">
            </a>
            <h3 class="spName">2017玉石摆件 客厅装饰品 玄关柜招财工艺品摆设</h3>
            <p class="center_yh block_yh hidden_yh" style="width:202px;">
            	<font class="left_yh red font16">￥268.00</font>
                <font class="right_yh c_66 font14">126人已买</font>
            </p>
            <div class="wCa">
            	<div class="wCa1">
                	<b><img src="images/star.png"></b>
                    <font>收藏</font>
                </div>
                <div class="wCa2">
                	<b><img src="images/sar.png"></b>
                    <font>加入购物车</font>
                </div>
            </div>
        </li>
        <li>
            <a href="product_detail.jsp" class="bjK">
            	<img src="images/xc.png">
            </a>
            <h3 class="spName">2017玉石摆件 客厅装饰品 玄关柜招财工艺品摆设</h3>
            <p class="center_yh block_yh hidden_yh" style="width:202px;">
            	<font class="left_yh red font16">￥268.00</font>
                <font class="right_yh c_66 font14">126人已买</font>
            </p>
            <div class="wCa">
            	<div class="wCa1">
                	<b><img src="images/star.png"></b>
                    <font>收藏</font>
                </div>
                <div class="wCa2">
                	<b><img src="images/sar.png"></b>
                    <font>加入购物车</font>
                </div>
            </div>
        </li>
        <li>
            <a href="product_detail.jsp" class="bjK">
            	<img src="images/xc.png">
            </a>
            <h3 class="spName">2017玉石摆件 客厅装饰品 玄关柜招财工艺品摆设</h3>
            <p class="center_yh block_yh hidden_yh" style="width:202px;">
            	<font class="left_yh red font16">￥268.00</font>
                <font class="right_yh c_66 font14">126人已买</font>
            </p>
            <div class="wCa">
            	<div class="wCa1">
                	<b><img src="images/star.png"></b>
                    <font>收藏</font>
                </div>
                <div class="wCa2">
                	<b><img src="images/sar.png"></b>
                    <font>加入购物车</font>
                </div>
            </div>
        </li>
        <li>
            <a href="product_detail.jsp" class="bjK">
            	<img src="images/xc.png">
            </a>
            <h3 class="spName">2017玉石摆件 客厅装饰品 玄关柜招财工艺品摆设</h3>
            <p class="center_yh block_yh hidden_yh" style="width:202px;">
            	<font class="left_yh red font16">￥268.00</font>
                <font class="right_yh c_66 font14">126人已买</font>
            </p>
            <div class="wCa">
            	<div class="wCa1">
                	<b><img src="images/star.png"></b>
                    <font>收藏</font>
                </div>
                <div class="wCa2">
                	<b><img src="images/sar.png"></b>
                    <font>加入购物车</font>
                </div>
            </div>
        </li>
        <li>
            <a href="product_detail.jsp" class="bjK">
            	<img src="images/xc.png">
            </a>
            <h3 class="spName">2017玉石摆件 客厅装饰品 玄关柜招财工艺品摆设</h3>
            <p class="center_yh block_yh hidden_yh" style="width:202px;">
            	  <font class="left_yh red font16">￥268.00</font>
                <font class="right_yh c_66 font14">126人已买</font>
            </p>
            <div class="wCa">
            	<div class="wCa1">
                	<b><img src="images/star.png"></b>
                    <font>收藏</font>
                </div>
                <div class="wCa2">
                	<b><img src="images/sar.png"></b>
                    <font>加入购物车</font>
                </div>
            </div>
        </li>
        <li>
            <a href="product_detail.jsp" class="bjK">
            	<img src="images/xc.png">
            </a>
            <h3 class="spName">2017玉石摆件 客厅装饰品 玄关柜招财工艺品摆设</h3>
            <p class="center_yh block_yh hidden_yh" style="width:202px;">
            	<font class="left_yh red font16">￥268.00</font>
                <font class="right_yh c_66 font14">126人已买</font>
            </p>
            <div class="wCa">
            	<div class="wCa1">
                	<b><img src="images/star.png"></b>
                    <font>收藏</font>
                </div>
                <div class="wCa2">
                	<b><img src="images/sar.png"></b>
                    <font>加入购物车</font>
                </div>
            </div>
        </li>
        <li>
            <a href="product_detail.jsp" class="bjK">
            	<img src="images/xc.png">
            </a>
            <h3 class="spName">2017玉石摆件 客厅装饰品 玄关柜招财工艺品摆设</h3>
            <p class="center_yh block_yh hidden_yh" style="width:202px;">
            	<font class="left_yh red font16">￥268.00</font>
                <font class="right_yh c_66 font14">126人已买</font>
            </p>
            <div class="wCa">
            	<div class="wCa1">
                	<b><img src="images/star.png"></b>
                    <font>收藏</font>
                </div>
                <div class="wCa2">
                	<b><img src="images/sar.png"></b>
                    <font>加入购物车</font>
                </div>
            </div>
        </li>
        <li>
            <a href="product_detail.jsp" class="bjK">
            	<img src="images/xc.png">
            </a>
            <h3 class="spName">2017玉石摆件 客厅装饰品 玄关柜招财工艺品摆设</h3>
            <p class="center_yh block_yh hidden_yh" style="width:202px;">
            	<font class="left_yh red font16">￥268.00</font>
                <font class="right_yh c_66 font14">126人已买</font>
            </p>
            <div class="wCa">
            	<div class="wCa1">
                	<b><img src="images/star.png"></b>
                    <font>收藏</font>
                </div>
                <div class="wCa2">
                	<b><img src="images/sar.png"></b>
                    <font>加入购物车</font>
                </div>
            </div>
        </li>
        <li>
            <a href="product_detail.jsp" class="bjK">
            	<img src="images/xc.png">
            </a>
            <h3 class="spName">2017玉石摆件 客厅装饰品 玄关柜招财工艺品摆设</h3>
            <p class="center_yh block_yh hidden_yh" style="width:202px;">
            	<font class="left_yh red font16">￥268.00</font>
                <font class="right_yh c_66 font14">126人已买</font>
            </p>
            <div class="wCa">
            	<div class="wCa1">
                	<b><img src="images/star.png"></b>
                    <font>收藏</font>
                </div>
                <div class="wCa2">
                	<b><img src="images/sar.png"></b>
                    <font>加入购物车</font>
                </div>
            </div>
        </li>
    </ul>
</div>
<div id="navs">
    <div id="nav_in">
        <a href="javascript:void(0)">«</a>
        <a href="javascript:void(0)">1</a>
        <a href="javascript:void(0)">2</a>
        <a href="javascript:void(0)">3</a>
        <a href="javascript:void(0)">4</a>
        <a href="javascript:void(0)">5</a>
        <a href="javascript:void(0)">»</a>
    </div>
</div>
<script>
$(".wCa div").click(function(){
	$(this).addClass("on")
	})
</script>
<!--品质保证-->
<div class="width1200 center_yh" style="height:130px;margin-top:60px;">
	<img src="images/db.png">
</div>
<!--页脚-->
<div class="width100 hidden_yh" style="background:#f0f0f0;margin-top:90px;">
	<div class="width1200 center_yh tcenter" style="margin-top:44px;">
    	<a href="#" class="in_block font16 c_33" style="padding:0 30px">工艺礼品</a>
        <a href="#" class="in_block font16 c_33" style="padding:0 30px">电子礼品</a>
        <a href="#" class="in_block font16 c_33" style="padding:0 30px">品牌礼品</a>
        <a href="#" class="in_block font16 c_33" style="padding:0 30px">商务礼品</a>
        <a href="#" class="in_block font16 c_33" style="padding:0 30px">食品礼盒</a>
        <p class="font16 c_33 tcenter" style="margin-top:46px;">www.lipinshijia.com © CopyRight 礼品世家 2007-2012 </p>
        <p class="font16 c_33 tcenter" style="margin-top:6px;">电话：000-0000000 手机：18022113311</p>
        <p class="font16 c_33 tcenter" style="margin-top:6px;margin-bottom:10px;">鲁ICP备:1666666号-1</p>
    </div>
</div>
</body>
</html>
